

import { Row, Col, Form, Input, Button, Select, message } from "antd"
import { reg } from "../../utils/validate"
import { common } from "../../utils";
import { $http } from "../../api";
import { UserOutlined, LockOutlined, PhoneOutlined } from '@ant-design/icons';
import { useRef, useState } from "react"
import { roleList } from "../../utils";
import { mbdata } from "../../mobx/data"
import { observer } from "mobx-react"
import { withRouter } from "react-router-dom"
const { pwd, account, phone } = reg;
const { Option } = Select


function UserAdd({ history }) {
  const form = useRef()
  const onFinish = (value) => {
    $http.register(value)
      .then(res => {
        if (res.code == 200) {
          history.push("/main/user/list")
        }
      })
  }
  const onFailed = (error) => {
    message.error("请输入所有信息再提交")

  }
  const { userInfo } = mbdata
  return (
    <div>
      <h2>用户管理</h2>
      <Row className="" style={{ marginTop: 20 }}>
        <Col className="" span={12}>

          <Form
            name="normal_login"
            className="login-form"
            initialValues={{    // 设置表单的初始值
              password: "abc123"
            }}
            onFinish={onFinish}
            onFinishFailed={onFailed}
            ref={form}
            layout={"vertical"}
            style={{ maxWidth: 240 }}
          >
            <Form.Item
              name="account"
              label="用&ensp;户&ensp;名"
              rules={[
                {
                  required: true,
                  message: '请输入用户名',
                },
              ]}
            >
              <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
            </Form.Item>

            <Form.Item
              name="phone"
              label="手&ensp;机&ensp;号"
              rules={[
                {
                  required: true,
                  message: '请输入手机号',
                },
                {
                  pattern: phone,
                  message: "请输入正确的手机号码  "
                }
              ]}
            >
              <Input prefix={<PhoneOutlined className="site-form-item-icon" />} placeholder="请输入手机号" />
            </Form.Item>


            <Form.Item
              name="password"
              label="登录密码"
              rules={[
                {
                  required: true,
                  message: '请输入登录密码',
                },
                {
                  pattern: pwd,
                  message: '请输入6-16位数字加字母的登录密码',
                },
              ]}
            >
              <Input disabled prefix={<LockOutlined className="site-form-item-icon" />} placeholder="请输入登录密码" />
            </Form.Item>




            <Form.Item
              name="role"
              label="用户权限"
              rules={[
                {
                  required: true,
                  message: '请选择',
                }
              ]}
            >
              <Select placeholder="请选择" style={{ width: '100%' }} >
                {/* 不能添加比你级别高 的用户 */}
                {
                  userInfo && roleList.map((l, i) => (
                    userInfo.role * 1 > l.value && <Option key={i} value={l.value} >
                      {l.text}
                    </Option>
                  ))
                }
              </Select>
            </Form.Item>



            <Form.Item
            >
              <Button block type="danger" htmlType="submit" >添加用户</Button>
            </Form.Item>

          </Form>
        </Col>
      </Row>



    </div>
  )
}

export default observer(UserAdd)